<template>
    <div class="content">
        <div class="chooseBox" v-if="!borrOne">
            <el-button plain @click="choose=true">更新</el-button>
            <el-button plain @click="choose=false">删除</el-button>
        </div>
        <el-form label-width="80px" ref="formRef">
            <el-form-item label="已选数据:" v-if="!borrOne">
                <div class="infoBox">
                    <div class="infoItem" v-for="(i, idx) in info">
                        <div class="left"><el-icon>
                                <Avatar />
                            </el-icon><span class="name">{{ i.nickname }}</span><span class="bookName">{{ i.bookname }}</span>
                        </div>
                        <div class="right"><el-icon @click="removeItem(i, idx)">
                                <Remove />
                            </el-icon></div>
                    </div>
                </div>
            </el-form-item>
            <template v-if="borrOne">
                <el-form-item label="选择状态:" >
                    <el-radio-group v-model="borrOne!.state">
                        <el-radio size="large" :label="0">已归还</el-radio>
                        <el-radio size="large" :label="1">未归还</el-radio>
                        <el-radio size="large" :label="2">逾期</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="归还日期:" v-if="borrOne!.state == 0">
                    <el-date-picker v-model="value1" type="date" placeholder="Pick a day" size="default" />
                </el-form-item>
                <el-form-item label="逾期原因:" v-if="borrOne!.state == 2">
                    <el-input type="textarea" :rows="4" maxlength="30" show-word-limit resize="none" v-model="borrOne!.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 400px;" @click="save(formRef)">保存</el-button>
                </el-form-item>
            </template>
            <template v-else>
                <el-form-item>
                    <el-button type="danger" style="width: 400px;" @click="deleteAll(formRef)">删除({{ info.length }})条信息</el-button>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reqEditBorrInfo } from '@/api/common';
import { BorrowType } from '@/types/borrow';
import { tip } from '@/utils/alert';
import dateFormat from '@/utils/dateFormat';
import { FormInstance } from 'element-plus';
import { computed, ref, watch } from 'vue';
const info = ref<BorrowType[]>([])
const formRef = ref<FormInstance>()
const borrOne=ref<BorrowType|null>(null)
const state = ref<number>(0)
const value1 = ref<string|null>()
const choose=ref<boolean>(true)
const props = defineProps<{
    // borrListByBulk: BorrowType[],
    borrOne:BorrowType|null
}>()
const emits = defineEmits(['emitReduce', 'emitchange'])
// watch(() => props.borrListByBulk, (newValue, oldValue) => {
//     console.log(newValue);
    
//     info.value = newValue
//     console.log(info.value);
// })




watch(()=>props.borrOne,(newValue, oldValue)=>{
    borrOne.value={...newValue as BorrowType}
    if(borrOne.value!=null){
        state.value=newValue!.state as number
        console.log(borrOne.value);
        value1.value=borrOne.value.returntime
        
    }
})

watch(info, () => {
    if (info.value.length == 0) {
        emits('emitchange', false)
    }
})

const removeItem = (item: BorrowType, idx: number) => {
    info.value.splice(idx, 1)
    emits('emitReduce', item)
}

const deleteAll=(formRef: FormInstance | undefined)=>{
    emits('emitchange', false)
}

const save = (formRef: FormInstance | undefined) => {
    console.log(borrOne.value?.state!=0);
    
    if(borrOne.value?.state!=0){
        borrOne.value!.returntime=null
    }else{
         borrOne.value!.returntime=dateFormat(value1.value as string).ymdhms;
    }
    console.log(borrOne.value?.returntime);
    reqEditBorrInfo(borrOne.value as BorrowType).then(res=>{
        tip(res.data.info,"success")
        emits('emitchange', {bool:false,info:res.data.data})


    })
    
}
</script>

<style scoped lang="scss">
.content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .chooseBox {
        width: 100%;
        display: flex;
    }
}

.el-form {
    .el-form-item {
        width: 400px;
        display: flex;
        align-items: center;

        .infoBox {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #e4e4e4;
            height: 120px;
            overflow: auto;

            .infoItem {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                box-sizing: border-box;
                padding: 5px 5px;
                color: #cccccc;
                border-bottom: 1px solid #e4e4e4;

                .left {
                    display: flex;
                    align-items: center;

                    .name {
                        margin-left: 3px;
                        color: #666666;
                        font-size: 16px;
                    }

                    .bookName {
                        margin-left: 8px;
                    }
                }

            }
        }
    }
}

::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}
</style>